<template>
		<div class="footer">
	    	<div class="tab" :class="[this.$router.history.current.name === 'home' ? 'active' : '', ] " v-tap="{methods:go,route:'home'}">
	    		<i class="iconfont icon-youhui1" ></i>
				<div>爱车</div>
	    	</div>
	    	<div class="tab" :class="[this.$router.history.current.name === 'new_home'  ? 'active' : '', ]" v-tap="{methods:go,route:'new_home'}">
	    		<i class="iconfont icon-shequ" :class="[this.$router.history.current.name === 'new_home'  ? 'active' : '', ]"></i>
				<div>服务</div>
	    	</div>
	    	<div class="tab" :class="[this.$router.history.current.name === 'my_options' ? 'active' : '', ]" v-tap="{methods:go,route:'my_options'}">
	    		<i class="iconfont icon-wode1"></i>
				<div>社区</div>
	    	</div>
			<div class="tab" :class="[this.$router.history.current.name === 'my_options' ? 'active' : '', ]" v-tap="{methods:go,route:'my_options'}">
	    		<i class="iconfont icon-wode1"></i>
				<div>我的</div>
	    	</div>
	    </div>
</template>

<script>
	export default {
		name:'ma-footer',
		data() {
			return {
				isActive:''
			};
		},
		created(){
		},
		methods:{
			go(params){
				switch (this.$router.history.current.name) {
					case params:
						break;
					default:
						this.$router.push({
							name:params.route
						})
						break;
				}
	    	}
		}
	}
</script>

<style scoped="scoped">
 .footer {
	position:fixed;
		z-index: 10000;
	height:50px;
	width:100%;
	display:flex;
	background:#f7f7f7;
	border-top: 1px solid #333;
	bottom:0;
	transform: translateZ(0);/*去抖*/
}
 .tab {
	flex:1 1 0;
	padding-top: 5px;
	background:#f7f7f7;
	text-align: center;
}
.tab i{
	font-size: 24px;
}
.tab div{
	margin-top: 2px;
}
.active{
	color: #FB8713;
}
</style>